<template>
  <view>
    <view v-for="(item, index) in processorAccountList" :key="index">
      <u-cell-group>
        <u-cell>
          <view slot="title" class="flex  justify-between"
            @click="btnSelectGoods(index, '/pages/application/pages/finance/account/bank-list/bank-list')">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-150 c-99"> 开户行: </view>
                <view class="flex-1 w-150">
                  {{ item.bankName }}
                </view>
              </view>
            </view>
          </view>
          <clIcon @click="delectItem(index)" slot="right-icon" type="icon-shanchu" color="#000" size="25"></clIcon>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex  justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-150 c-99"> 开户人: </view>
                <view class="flex-1">
                  <u--input v-model="item.holder" placeholder="请输入内容" border="none"></u--input>
                </view>
              </view>

              <view class="flex-1 flex-sb p-l-20">
                <view class="w-100 c-99"> 账号: </view>
                <view class="flex-1">
                  <u--input v-model="item.accountNumber" placeholder="请输入内容" border="none"></u--input>
                </view>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex ">
            <view class="w-150 c-99"> 备注: </view>
            <view class="flex-1">
              <u--input v-model="item.remarks" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>
      </u-cell-group>
      <u-gap height="10" bgColor="#eee"></u-gap>
    </view>
    <view class="flex content btn-view">
      <view class="btn flex" @click="addItem">
        <u-icon name="plus" size="10"></u-icon>
        <text class="p-l-20">添加银行卡</text>
      </view>
      <view class="btn flex">
        <u-icon name="camera-fill" size="10"></u-icon>
        <text class="p-l-20">识别营业执照</text>
      </view>
    </view>
    <!-- <u-button text="添加开户行" @click="addItem" plain hairline class="w-100"></u-button> -->
  </view>
</template>
<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getVoDataById } from "@/apis/inventory/converter";
export default {
  props: {},
  components: {
    clIcon,
  },
  data() {
    return {
      processorAccountList: [
        {
          "seq": "",
          "bankName": "",
          "accountNumber": "",
          "holder": "",
          "sort": 1,
          "remarks": "",
          "isDefault": true,
          "bankId": ""
        }
      ],
      index: 0
    };
  },
  created() {
    uni.$on('selectedBank', data => {
      this.processorAccountList[this.index].bankName = data.label
      this.processorAccountList[this.index].bankId = data.value
    })
  },
  beforeDestroy() {
    uni.$off("selectedBank")

  },
  methods: {
    getDataItem(id) {
      getVoDataById(id).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.processorAccountList = data.processorAccountList
      });
    },

    btnSelectGoods(index, url) {
      if (!url) return;
      this.index = index
      this.$Router.push({
        path: url,
      });
    },
    addItem() {
      this.processorAccountList.push({
        "seq": "",
        "bankName": "",
        "accountNumber": "",
        "holder": "",
        "sort": 1,
        "remarks": "",
        "isDefault": true,
        "bankId": "JH"
      })
    },
    delectItem(index) {
      this.processorAccountList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-view {
  justify-content: space-around;
  padding-left: 30rpx;
  margin: 24rpx 0;

  .btn {
    border: 1rpx dashed #999;
    padding: 14rpx 40rpx;
    border-radius: 8rpx;
  }
}
</style>
